/**
 * 字典管理 - 规则
 * @author xiaoxujs
 */

import { useCallback, useEffect, useState } from "react";
import { Search } from "../../../../components/UiManagement";
import { DicManagedEventBox, DicManagemedEventItem, DicManagemedEventUl, RolePageHeaderBox } from "./style";
import { INoFenye } from "../../../../type/common";
import { useNavigate } from "react-router-dom";
import { postSyhtDictRuleGetDictRuleAll } from "../../../../api/ConfigManagement/DicManaged/DicManagedRuleApi";
import { ISyhtDictRuleGetDictRuleAll } from "../../../../type/ConfigManagement/DicManaged/DicManagedRule";

const DicManagedRule = () => {
    const navigate = useNavigate()//     路由跳转

    const [listData, setListData] = useState<ISyhtDictRuleGetDictRuleAll[]>([]); // 列表数据
    const listFun = useCallback(
        async (params: {ruleName?: string}) => {
            const { code, msg, data } = await postSyhtDictRuleGetDictRuleAll(params) as INoFenye<ISyhtDictRuleGetDictRuleAll>;
            if (code === 200) {
                setListData(data)
            } else {
                setListData([])
                alert(msg)
            }

        },
        [],
    )

    useEffect(() => {
        listFun({})
    }, [listFun])



    // 检索
    const handleSearch = (value: string) => {
        listFun({ ruleName: value })
    }
    return (
        <DicManagedEventBox>
            <RolePageHeaderBox>
                <div className="left">
                    <div className="left_left_jiantou"></div>
                    <div>全部列表</div>
                    <div className="left_right_jiantou"></div>
                </div>
                <div className="right">
                    <Search placeholder="请搜索关键字" searchChange={(value) => handleSearch(value)} />
                </div>
            </RolePageHeaderBox>
            <DicManagemedEventUl>
                {
                    listData.map((item, index) => {
                        return <DicManagemedEventItem key={item.ruleId}>
                            <div className="title">
                                <span>{item.ruleName}</span>
                            </div>
                            <div className="button_box">
                                <div className="button_enter left" onClick={() => {
                                    navigate('/home/config/dic/dicManagedRule/dicManagedRuleDetails', { state: item })
                                }}>
                                    进入管理
                                </div>
                            </div>
                        </DicManagemedEventItem>
                    })
                }

            </DicManagemedEventUl>
        </DicManagedEventBox>
    )
}

export default DicManagedRule;